<script setup>
import {ref,watch}  from "vue";
import { Edit ,Male,Female,WarnTriangleFilled} from "@element-plus/icons-vue";
import {getUserInformationService} from "@/api/user"
import {getFollowListService,getFansListService,getIsFollowService,followService,unfollowService} from "@/api/follow"
import PersonalShow from "@/components/PersonalShow.vue"
import { useRouter,useRoute } from 'vue-router';
import { useUserStore } from '@/stores/user'
import {userReportService} from '@/api/report'
import PersonalDynamics from '@/views/client/dynamic/PersonalDynamics.vue'
import heada_Image from"@/assets/boy.jpg"
// import PersonalFans from '@/views/client/PersonalFans.vue'


const router=useRouter()
const route=useRoute()
const userStore = useUserStore()
const personalInformation=ref({
})

const image=heada_Image
const fans=ref([])
const follows=ref([])

// const current =route.params.userId
const getPersonalInformation=async ()=>{
  console.log(route.params.userId)
  if(route.params.userId){
    let res=await getUserInformationService(route.params.userId)
    personalInformation.value=res.data
    res=await getIsFollowService(route.params.userId)
    personalInformation.value.isFollow=res.data
    //获取粉丝列表
    res = await getFansListService(route.params.userId)
    console.log(res)
    fans.value=res.data.list
    //获取关注列表
    res=await getFollowListService(route.params.userId)
    console.log(res)
    follows.value=res.data.list
  }else{
    let res=await getUserInformationService(userStore.userId)
    personalInformation.value=res.data
    res = await getFansListService(userStore.userId)
    console.log(res)
    fans.value=res.data.list
    
    res=await getFollowListService(userStore.userId)
    console.log(res)
    follows.value=res.data.list
    
  }
}

getPersonalInformation()

watch(route,(to,from)=>{
  router.go(0)
  console.log(to,from)
 })

const activeName=ref('personalDynamics')


const follow=async ()=>{
  const res=await followService(route.params.userId)
  console.log(res)
  ElMessage.success("已关注");
  getPersonalInformation()
}

const unfollow=async (userId)=>{
  const res=await unfollowService(userId)
  console.log(res)
  ElMessage.success("取消关注");
  getPersonalInformation()
}

const Report=(userId)=>{
  ElMessageBox.prompt('请输入举报理由', '用户举报', {
    confirmButtonText: '提交',
    cancelButtonText: '取消',
    inputPattern: /^.+$/,
    inputErrorMessage: '举报理由为空',
    
  }).then(async ({value}) => {
        const res=await userReportService(userId,value)
        console.log(res)
      ElMessage({
        type: 'success',
        message: '举报成功',
      })
    })
    .catch(() => {
      
    })
}

const personalDynamics=ref()

</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-header height="200px">
        <div class="head">
          <div class="avatar">
            <div style="float: left">
              <el-avatar
                :size="100"
                style="vertical-align: middle"
                :src="personalInformation.avatar!='default.jpg'? personalInformation.avatar : image"
            
              />
              
            </div>
            <div style="float: left;height: 180px; margin-left: 30px; width: 250px;">
              <p style="font-size: larger;">{{ personalInformation.userName }}
                <el-icon v-if="personalInformation.sex=='女'" color="red"><Female /></el-icon>
          <el-icon v-else color="blue"><Male /></el-icon>
              </p>
              
              <p>{{ personalInformation.autograph }}</p>
            </div>
          </div>

          <div class="profile">
            <div class="con">
              <div>
                <span>{{ follows.length }}</span>
                <span>{{fans.length}}</span>
                <span>{{personalDynamics?.dynamiclength}}</span>
                
              </div>
              <div>
                <span>关注</span>
                <span>粉丝</span>
                <span>动态</span>
                
                
              </div>
              <div>
                <el-button v-if="!route.params.userId || route.params.userId==userStore.userId" @click="router.push('/myInformationLayout')" size="large" type="primary" :icon="Edit"
                  >编辑个人信息</el-button>
                  <el-button v-else-if="!personalInformation.isFollow" @click="follow " size="large" type="primary" :icon="Edit"
                  >关注</el-button>
                  <el-button v-else @click="unfollow(route.params.userId)" size="large" type="primary" :icon="Edit"
                  >已关注</el-button>
                  <!-- <span  v-if="personalInformation.userId!=userStore.userId">举报</span> -->
                  <span style="height: 40px;" v-if="personalInformation.userId!=userStore.userId" @click="Report(personalInformation.userId)">  <el-icon size="23" ><WarnTriangleFilled  /></el-icon> </span>
              </div>
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        
        <!-- <button @click="router.replace('/personalCenter/1')">测试</button> -->
  <el-tabs style="width: 70%; margin-left: 200px;" v-model="activeName" class="demo-tabs" >
    <el-tab-pane label="个人动态" name="personalDynamics">
      <PersonalDynamics ref="personalDynamics" :userId="route.params.userId || userStore.userId"></PersonalDynamics>
    </el-tab-pane>
    <el-tab-pane label="关注" name="follow">
      <div class="fans">
        <PersonalShow v-for="follow in follows" :key="follow.userId" :personal="follow">
          <template v-if="!route.params.userId || route.params.userId==userStore.userId" #follow>
          <el-button @click="unfollow(follow.userId)" round>取消关注</el-button>
        </template>
        </PersonalShow>
    </div>
    </el-tab-pane>
    <el-tab-pane label="粉丝" name="fans">
      <div class="fans">
        <PersonalShow v-for="fan in fans" :key="fan.userId" :personal="fan">
          <!-- <template v-if="!route.params.userId || route.params.userId==userStore.userId" #follow>
          <el-button round >关注</el-button>
        </template> -->
        </PersonalShow>
    </div>
    </el-tab-pane>
  </el-tabs>

    


        
      </el-main>
    </el-container>
  </div>
</template>
<style scoped>
.head {
  width: 70%;
  float: left;
  height: 90%;
  /* padding-left: 200px; */
  border: 1px solid #eeeaea;
  margin-left: 200px;
}
.avatar {
    height: 250px;
  float: left;
  width: 400px;
  line-height: 180px;
  padding-left: 40px;
  padding-right: 40px;
  p{
    font-size: small;
    height: 60px;
    width: 250px;
    margin: 0;
    list-style: 100px;
    /* color: #eae5e5; */
  }
  
}
.profile {
  float: left;
  margin-top: 30px;
  margin-left: 0;
  width: 50%;
  .con {
    width: 250px;
    margin-left: 220px;
    /* background-color: antiquewhite; */
  }
}
.profile span {
  width: 32px;
  text-align: center;
  display: inline-block;
  padding: 10px;
}

.tabs{
  width: 700px;
  margin-left: 20%;
}
</style>
